<!DOCTYPE html>
<script>
    if (window.testRunner)
        testRunner.waitUntilDone();
    window.manualNotifyDone = true;
</script>
<script src="resources/srcset-helper.js"></script>
<script src="../../resources/js-test.js"></script>
<script>
    // Only run the actual test when the scale factor has been set.
    if (sessionStorage.scaleFactorIsSet) {
        addEventListener("load", function() {
            var img = document.getElementById("foo");
            img.srcset = "resources/green-400-px-square.png 2x";
            img.addEventListener("load", function() {
                shouldBeTrue('document.getElementById("foo").clientWidth==200');
                shouldBeFalse('document.getElementById("foo").clientWidth==400');
                if (window.testRunner)
                    testRunner.notifyDone();
            }, false);
        }, false);
    }
</script>
<div>This test passes if this img tag below is a green square when the scale factor is 2.
    It ensures that attributes can be changed dynamically from javascript, and that only the correct resource is loaded.</div>
<img id="foo" src="resources/blue-100-px-square.png">
